<template>
    <van-nav-bar title="创建用户" left-arrow @click-left="$router.back()" />
    <van-form @submit="onSubmit">
      <van-field
        v-model="form.name"
        name="name"
        label="姓名"
        placeholder="请输入姓名"
        :rules="[{ required: true, message: '请填写姓名' }]"
      />
      <van-field
        v-model="form.email"
        name="email"
        label="邮箱"
        placeholder="请输入邮箱"
        :rules="[{ required: true, message: '请填写邮箱' }]"
      />
      <div style="margin: 16px;">
        <van-button round block type="primary" native-type="submit">
          提交
        </van-button>
      </div>
    </van-form>
  </template>
  
  <script lang="ts">
  import { defineComponent, reactive } from 'vue'
  import { createUser } from '../api/modules/user'
  import { showSuccessToast, showFailToast } from 'vant'
  
  export default defineComponent({
    setup() {
      const form = reactive({
        name: '',
        email: ''
      })
  
      const onSubmit = async () => {
        try {
          await createUser(form)
          showSuccessToast('创建成功')
          form.name = ''
          form.email = ''
        } catch (error) {
          showFailToast('创建失败')
        }
      }
  
      return { form, onSubmit }
    }
  })
  </script>